<template>
  <div>
    <div class="c-ph24 c-pv30">
      <related-item :relatedList="relatedList" :isBuy="isBuy"></related-item>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无商品"></loading-status-tem>
    </div>
  </div>
</template>
<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import RelatedItem from "@/components/templates/relatedItem.vue";
import { utilJs } from "@/utils/common.js";
const LIMIT = 20;
let pageIndex = 1;
export default {
  name: "SocialRelatedList",
  components: {
    loadingStatusTem,
    RelatedItem,
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      dataStatus: 'HAS_MORE_DATA',
      relatedList: [],
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    getPackagedList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(
        `${global.apiurl}social/${this.socialRoomId}/packagedLearningList?page=${pageIndex}&limit=${LIMIT}`,
        res => {
          this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
          if (pageIndex == 1) {
            this.relatedList = res.data;
          } else {
            this.relatedList = [...this.relatedList, ...res.data];
          }
          this.relatedList = this.relatedList.filter(item => item.status != 0)
          if (res.data && (res.data.length < LIMIT)) {
            this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.liveList.length > 0) {
          this.getPackagedList();
        }
      });
    },
    initData() {
      pageIndex = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.liveList = [];
      this.getPackagedList();
    },
  },
  activated() {
    setDocumentTitle("搭配学习列表");// eslint-disable-line
    this.socialRoomId = this.$route.query.socialRoomId || '';
    this.isBuy = this.$route.query.isBuy || 0;
    this.initData();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
</style>

